import React from "react";
import Taro from "@tarojs/taro";
import { Text, View } from "@tarojs/components";
import { AtButton, AtCard } from "taro-ui"; // 使用 taro-ui 组件库
import "./index.scss";

const RouteRecommend = () => {
  const routes = [
    {
      id: 1,
      title: "周家庄文化遗产游",
      description: "探索周家庄的古老文化和历史遗迹，了解当地风情。",
      image: "https://th.bing.com/th/id/OIP.fQ9vx5PrrGrH8lwQK6goDwHaE8?rs=1&pid=ImgDetMain",
      time: "3小时",
    },
    {
      id: 2,
      title: "周家庄美食之旅",
      description: "品尝周家庄的传统美食，享受地道的乡村风味。",
      image: "https://th.bing.com/th/id/OIP.BIUuN9XYr3kPYC47fDUy2gAAAA?rs=1&pid=ImgDetMain",
      time: "2小时",
    },
  ]

  const handleRouteSelect = (routeId: number) => {
    Taro.navigateTo({
      url: `/pages/routeDetail/index?routeId=${routeId}`,
    });
  };

  return (
    <View className="route-recommend-page">
      <View className="page-header">
        <Text className="header-title">推荐路线</Text>
        <Text className="header-subtitle">选择您的下一次旅行路线</Text>
      </View>

      <View className="route-list">
        {routes.map((route) => (
          <AtCard
            key={route.id}
            title={route.title}
            thumb={route.image}
            extra={route.time}
            onClick={() => handleRouteSelect(route.id)}
          >
            <Text className="route-description">{route.description}</Text>
          </AtCard>
        ))}
      </View>

      <View className="footer">
        <AtButton
          type="primary"
          size="normal"
          onClick={() => Taro.switchTab({ url: "/pages/index/index" })}
        >
          返回首页
        </AtButton>
      </View>
    </View>
  );
};

export default RouteRecommend;
